<section class="autotrophy width1200">
  <!-- 分类 -->
  <div class="row-list">
    <el-row>
      <el-col :span="4" class="list-left">
        分类
      </el-col>
      <el-col :span="20" class="list-right">
        <div class="list-r-con" >

          <a href="javascript:0" @click="change(1,item.type)" v-for="(item,index) in tableData" :key="index">{{item.type}}</a>
          <!-- <a href="javascript:0">pE</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">茂金属</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">塑料制品</a> -->
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="list-left">
        产地
      </el-col>
      <el-col :span="20" class="list-right ">
        <div class="list-r-con">
          <a href="javascript:0" @click="change(2,item.address)"  v-for="(item,index) in tableData" :key="index">{{item.address}}</a>
          <!-- <a href="javascript:0">pE</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">茂金属</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">塑料制品</a> -->
        </div>
        <div class="list-r-more">
          <!-- <span class="more ">更多
              <i class="el-icon-arrow-down"></i>
            </span>
             -->
          <span class="more ">收起
            <i class="el-icon-arrow-up"></i>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="list-left">
        库别
      </el-col>
      <el-col :span="20" class="list-right">
        <div class="list-r-con">
          <a href="javascript:0" @click="change(3,item.company)"  v-for="(item,index) in tableData" :key="index" >{{item.company}}</a>
          <!-- <a href="javascript:0">pE</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">茂金属</a>
          <a href="javascript:0">pp</a>
          <a href="javascript:0">塑料制品</a> -->
        </div>
        <div class="list-r-more">
          <span class="more ">更多
            <i class="el-icon-arrow-down"></i>
          </span>

        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="list-left">
        筛选条件
      </el-col>
      <el-col :span="20" class="list-right">
        <label for="">全部结果</label>
        <span class="gt"  v-show="params.types||params.address||params.company">&gt;</span>
        <span v-show="params.types">
        <el-tag size="mini" closable  >分类:{{params.types}}</el-tag>
          
        </span>
        <span v-show="params.address">
          <el-tag size="mini" closable>分类:{{params.address}}</el-tag>
        
        </span>
        <span v-show="params.company">
          <el-tag size="mini" closable>分类:{{params.company}}</el-tag>
        
        </span>
        <!-- <el-tag size="mini" closable>分类：PP</el-tag>
        <el-tag size="mini" closable>分类：PP</el-tag> -->
      </el-col>
    </el-row>
  </div>
<!-- 搜索 -->
<div class="autosearch">
  <el-form :model="formauto">
    <el-form-item label="" >
      <div class="auto-left">
        <label for="" class="label">关键字</label>
        <el-input v-model="params.keyword" @blur = "search" class="inp" placeholder="请输入内容"></el-input>
        <label class="adr-methods">交货方式</label>
        <el-select v-model="params.selectType" @change="sendway" placeholder="全部">
          <el-option label="全部" :value="0" key="0"></el-option>
          <el-option label="配送" :value="1" key="1"></el-option>
          <el-option label="自提" :value="2" key="2"></el-option>
        </el-select>
      </div>
      <div class="auto-right">
       <div class="page">
          <span>{{pageNo}}</span>
          <span>/</span>
          <span>{{Math.ceil(total/pagesize)}}</span>
       </div>
       <div class="sub1">
         <el-button size="mini" type="info" @click="goPrev">&lt;</el-button>
         <el-button size="mini" @click="goNext">&gt;</el-button>
       </div>
      </div>
    </el-form-item>
  </el-form>
</div>

<div class="auto-list">
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="type" label="分类" width="86">
    </el-table-column>
    <el-table-column prop="marknum" label="牌号" class-name="color" >
    </el-table-column>
    <el-table-column prop="address" label="产地">
    </el-table-column>
    <el-table-column prop="num" label="数量(吨)" >
      <template slot-scope="scope">
        <span v-if="scope.row.num =='无货'" class="nogoods">{{scope.row.num}}</span>
        <span v-else>{{scope.row.num}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="company" label="库别">
    </el-table-column>
    <el-table-column prop="sendway" label="交货方式">
      
    </el-table-column>
    <el-table-column prop="updatetime" sortable label="更新时间">
      <template slot-scope="scope">
        <span>{{scope.row.updatetime}}分钟前</span>
      </template>
    </el-table-column>
    <el-table-column  label="价格" sortable width="156">
      <template slot-scope="scope">
        <p><span class="price">￥{{scope.row.price}}/吨</span><span class="img"><img src="../../assets/homeimg/zoushi.png" alt=""></span></p>
        <p>
          <el-popover
          ref="popover1"
          placement="top-start"
          trigger="hover"
          content="满1000返1000">
        </el-popover>
        <el-popover
            ref="popover2"
            placement="top-start"
            trigger="hover"
            content="满1000返1000">
          </el-popover>
          <el-tag size="mini" v-popover:popover1 class="fan">返券</el-tag>
          <el-tag size="mini" v-popover:popover1 class="jian">满减</el-tag>
        </p>

      </template>
    </el-table-column>
    <el-table-column prop="updown" label="涨跌">
      <template slot-scope="scope">
        <span v-if="scope.row.updown && scope.row.updown.indexOf('↑')>-1" class="green">{{scope.row.updown}}</span>
        <span v-else class="red">{{scope.row.updown}}</span>
      </template>
      </el-table-column>
    </el-table-column>
    <el-table-column prop="" label="" class="auto-list-right" width="251">
      <template slot-scope="scope">
        <div class="auto-list-right auto">
          加入自选
        </div>
        <div class="auto-list-right person">
          <el-tooltip placement="top" effect="light" popper-class="border">
            <div slot="content" class="auto-content clearfix">
              <div class="wei-left">
                <img src="../../assets/homeimg/weixin.png">
                扫码加微信咨询
              </div>
              <div class="wei-right">
                <h3>王大力</h3>
                <div class="qq">
                  <span class="ha">华北区销售经理</span>
                  <span class="qq-img"><img src="../../assets/homeimg/qq.png" alt=""></span>
                </div>
                <p class="fz tel">手机：18682332323</p>
                <p class="fz email">邮箱：wangal@fas.com</p>
                <p class="fz weixin">微信：suyun</p>
              </div>
            </div>

            <!-- <el-button>Top center</el-button> -->
          <img src="../../assets/homeimg/header.png" alt="">
            
          </el-tooltip>
          <el-tooltip class="item" effect="dark"  placement="top-start">
          

          </el-tooltip>
        </div>
        <div class="auto-list-right caigou">
          <router-link to="/order" tag="span">
            <el-button size="small" type="primary">立即采购</el-button>
          </router-link>
          <!-- <el-button type="primary">立即采购</el-button> -->
        </div>
      </template>
    </el-table-column>
  </el-table>
</div>

<div class="block ">
  <!-- <span class="demonstration">调整每页显示条数</span> -->
  <el-pagination class="mypage" prev-text="上一页" next-text="下一页"   
    :page-size="pagesize" :current-page.sync="pageNo" @size-change="handleSizeChange"  @current-change="handleCurrentange"  layout=" prev, pager, next,total,jumper,slot" :total="total">
    <slot>
      <el-button type="light" class="btn-next">确定</el-button>
    </slot>
  </el-pagination>
  
</div>
</section>